'use client';

import Avatar from '@/asset/avatar.png';
import type { User } from '@/service/type/user';
import dayjs from 'dayjs';
import QueryImage from '../common/query-image';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '../ui/dialog';
import { Label } from '../ui/label';

export default function UserDetail({
  button,
  user,
}: { button: React.ReactNode; user: User }) {
  return (
    <Dialog>
      <DialogTrigger asChild>{button}</DialogTrigger>
      <DialogContent>
        <DialogHeader className="space-y-4">
          <DialogTitle>用户信息</DialogTitle>
          <DialogDescription className="hidden" />
        </DialogHeader>
        <div className="flex items-center gap-7">
          <QueryImage
            imageKey={user.image}
            defaultImage={Avatar}
            wrapperClassName="w-24 h-24 rounded-full"
            imgClassName="rounded-full w-full h-full object-cover"
          />
          <div>
            <div>{user.name}</div>
            <div className="text-muted-foreground text-sm">{user.email}</div>
          </div>
        </div>
        <div className="grid grid-cols-2 gap-5 p-3">
          <div className="space-y-2">
            <Label>用户名</Label>
            <div>{user.username}</div>
          </div>
          <div className="space-y-2">
            <Label>昵称</Label>
            <div>{user.name}</div>
          </div>
          <div className="space-y-2">
            <Label>邮箱</Label>
            <div className="break-all">{user.email}</div>
          </div>
          <div className="space-y-2">
            <Label>注册时间</Label>
            <div>{dayjs(user.createdAt).format('YYYY-MM-DD HH:mm:ss')}</div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}
